<template>
  <div class="home">
    <div class="zl-header">
      <div class="zl-logo"></div>
      <p class="zl-desc">随心写作，自由表达</p>
      <el-button class="write-btn zl-btn" @click="toWrite">开始写文章</el-button>
    </div>
    <div class="zl-content">
      <h3 class="text-center font-semibold text-sm mb-8">专栏 · 发现</h3>
      <div class="text-center">
        <div class="column-list">
          <div class="column-item" v-for="item in columns.list" :key="item._id">
            <img :src="item?.avatar?.url" alt="" class="column-avatar" />
            <p class="column-author">{{ item.title }}</p>
            <div class="column-desc">{{ item.description }}</div>
            <div class="text-sm text-center mt-3">{{ item.createdAt }}</div>
            <el-button class="zl-btn mt-4" @click="toColumn(item._id)">进入专栏</el-button>
          </div>
        </div>
        <div class="h-8 mt-4" v-loading="loading">
          <el-button class="zl-btn" v-if="showLoadMore" @click="loadMore">加载更多</el-button>
        </div>
      </div>
    </div>
    <div class="zl-footer">
      <div class="zl-desc">在知乎创作</div>
      <el-button class="apply-btn">我的专栏</el-button>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref, reactive, onMounted, computed } from 'vue'
import { ElButton } from 'element-plus'
import { ColumnDto, getPageColumns } from '@/services/ApiServer/ColumnsRequest'
import { useRouter } from 'vue-router'

export default defineComponent({
  name: 'home',
  components: {
    ElButton,
  },
  setup() {
    let columns = reactive({
      list: [] as ColumnDto[],
      pageNo: 1,
      pageSize: 8,
      total: 0,
    })
    let loading = ref(false)
    const showLoadMore = computed(() => {
      return columns.total > (columns.pageNo - 1) * columns.pageSize && !loading.value
    })
    const getColumnList = async () => {
      loading.value = true
      const res = await getPageColumns({
        currentPage: columns.pageNo,
        pageSize: columns.pageSize,
      })
      if (res && res.code === 0) {
        columns.list = columns.list.concat(res.data.list)
        columns.total = res.data.count
      }
      loading.value = false
    }
    const loadMore = () => {
      getColumnList()
      columns.pageNo += 1
    }
    const router = useRouter()
    const toWrite = () => {
      router.push('/writeArticle')
    }
    const toColumn = (id: string) => {
      router.push(`/column/list/${id}`)
    }
    onMounted(() => {
      loadMore()
    })
    return {
      columns,
      getColumnList,
      showLoadMore,
      loading,
      loadMore,
      toWrite,
      toColumn,
    }
  },
})
</script>

<style lang="scss" scoped>
.home {
  .zl-header {
    height: 470px;
    background: url('../../assets/images/zhuanlan-bg.png') 50% no-repeat;
    position: relative;
    &::before {
      background: url('../../assets/images/dash-bg.png') repeat-x;
      background-size: 20px 450px;
      content: '';
      height: 100%;
      left: 0;
      position: absolute;
      width: 100%;
    }
    .zl-logo {
      background: url('../../assets/images/zhihuzhuanlan.png') 50% no-repeat;
      background-size: 129px 179px;
      height: 0;
      left: 50%;
      margin: 0 0 0 -65px;
      overflow: hidden;
      padding-top: 179px;
      position: absolute;
      top: 152px;
      width: 129px;
    }
    .zl-desc {
      font-size: 18px;
      font-weight: 300;
      letter-spacing: 0.5em;
      line-height: 24px;
      margin: 0;
      position: absolute;
      text-align: center;
      top: 350px;
      width: 100%;
    }
    .write-btn {
      height: 38px;
      left: 50%;
      line-height: 36px;
      margin-left: -51px;
      position: absolute;
      top: 413px;
      width: 120px;
    }
  }
  .zl-content {
    .column-list {
      width: 888px;
      display: flex;
      flex-wrap: wrap;
      margin: 0 auto;
      .column-item {
        width: 206px;
        background-color: #fff;
        margin: 0 8px 16px;
        padding: 26px 0 23px;
        color: grey;
        text-align: center;
        border-radius: 4px;
        box-shadow: 0 8px 18px rgb(0 0 0 / 6%);
        .column-avatar {
          width: 48px;
          height: 48px;
          border-radius: 50%;
          margin: 0 auto;
        }
        .column-author {
          margin-top: 16px;
          text-align: center;
          font-weight: 600;
          color: #000;
          text-overflow: ellipsis;
          overflow: hidden;
          white-space: nowrap;
          padding: 0 16px;
        }
        .column-desc {
          text-indent: 10px;
          margin-top: 7px;
          font-size: 14px;
          text-align: center;
          display: -webkit-box;
          -webkit-line-clamp: 2;
          -webkit-box-orient: vertical;
          overflow: hidden;
          text-overflow: ellipsis;
          word-break: break-all;
          word-wrap: break-word;
          padding: 0 16px;
          height: 42px;
        }
      }
    }
  }
  .zl-footer {
    background: url('../../assets/images/dash-bg.png') repeat-x;
    background-size: 20px 450px;
    margin-top: 48px;
    padding: 134px 0 80px;
    .zl-desc {
      font-size: 18px;
      font-weight: 300;
      letter-spacing: 0.5em;
      text-align: center;
      width: 345px;
      border: solid #97ffd8;
      border-width: 1px 0;
      padding: 26px 0;
      margin: 0 auto;
    }
    .apply-btn {
      width: 120px;
      margin: 40px auto 0;
      display: block;
    }
  }
  .zl-btn {
    border-color: var(--zh-green);
    color: var(--zh-green);
  }
}
</style>
<style lang="scss">
.home {
  .el-loading-mask {
    background-color: #fbfcfc;
  }
}
</style>
